<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改客房信息</title>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
    <div id="app">
    <table border="1px" cellpadding="10px" cellspacing="0" align="center" width="500px">
        <caption><h2>修改客房信息</h2></caption>
        <tr>
            <td>房间名称</td>
            <td>
                <input type="text" v-model="room.rname">
            </td>
        </tr>
        <tr>
            <td>房间单价</td>
            <td>
                <input type="text" v-model="room.price">
            </td>
        </tr>
        <tr>
            <td>房间类型</td>
            <td>
                <select v-model="room.type">
                    <option value="单人间">单人间</option>
                    <option value="双人间">双人间</option>
                    <option value="总统套房">总统套房</option>
                    <option value="贵宾间">贵宾间</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>房间状态</td>
            <td>
                <input type="radio" value="空闲" v-model="room.state">空闲
                <input type="radio" value="入驻" v-model="room.state">入驻
                <input type="radio" value="维修" v-model="room.state">维修
            </td>
        </tr>
        <tr>
            <td>备注说明</td>
            <td>
                <textarea rows="4" cols="40" v-model="room.mark"></textarea>
            </td>
        </tr>
        <tr align="center">
            <td colspan="2">
                <input type="submit" value="修改" @click="updateRoom()">
                <input type="reset"  value="取消">
                <input type="button"  value="返回" @click="history.back()">
            </td>
        </tr>
    </table>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            room:{
                rid:"",
                rname:"",
                price:"",
                type:"",
                state:"",
                mark:""
            }
        },
        methods:{
            findById(){
                //获取连接
                var url = location.href;
                //通过连接找到rid号
                var rid = url.substring(url.lastIndexOf("=")+1);
                
                axios({
                    url:"http://localhost:8080/hotel/room?method=findById&rid="+rid,
                    methods:"get"
                }).then(resp=>{
                    console.log(resp.data);
                    //向room中回显数据
                    this.room=resp.data.data;
                })
            },
            updateRoom(){
                //获取数据
                var params = new URLSearchParams();
                for(var key in this.room){
                    params.append(key,this.room[key]);  
                }
                axios({
                    url:"http://localhost:8080/hotel/room?method=updateRoom",
                    method:"post",
                    data:params
                }).then(resp =>{
                   if(resp.data.code==200){
                       alert(resp.data.msg);
                   }else{
                       alert(resp.data.msg);
                   }
                   location.href="index.html";
                    
                })
            }
        },
        created(){
            this.findById();
        }
    })
</script>
</body>
</html>